<template>
  <div class="task-detail">
        <el-row :key="index"  v-for="(titleItem,index) in titleItems" style="width: 80%;margin: 0 auto;">
            <el-card class="exampaper-item-box">
            <h3 class="questionItems-tit">{{titleItem.name}}</h3>
                <el-form :model="form" ref="form" label-width="100px">
                        <el-form-item class="exam-question-item" label-width="50px" v-for="(questionItem, idx) in titleItem.questionItems" :key="idx">
                            <h4 v-html="questionItem.title"></h4>
                            <!-- 单选 -->
                            <div class="block" v-if="questionItem.questionType == 1">
                                <el-radio v-model="questionItem.content" v-for="(radio,radioInd) in questionItem.items" :key="radio.itemUuid" :label="radio.prefix">
                                    <span>{{radio.prefix}}. {{radio.content}}</span>
                                </el-radio>
                            </div>
                            <div class="block" v-if="questionItem.questionType == 2">
                                <el-checkbox-group v-model="questionItem.contentArray" v-if="questionItem.items && questionItem.items.length">
                                    <el-checkbox :label="item.prefix" v-for="(item,itemIdx) in questionItem.items" :key="item.prefix">{{item.content}}</el-checkbox>
                                </el-checkbox-group>
                            </div>
                            <div class="block" v-if="questionItem.questionType == 3">
                                <el-radio v-model="questionItem.doRight" :label="true">√</el-radio>
                                <el-radio v-model="questionItem.doRight" :label="false">×</el-radio>
                            </div>
                            <!-- <div class="block" v-if="questionItem.questionType == 4">
                                <el-input v-model="input" placeholder="请输入内容"></el-input>
                            </div> -->
                            <div class="block" v-if="questionItem.questionType == 5">
                               <el-input
                                type="textarea"
                                placeholder="请输入内容"
                                v-model="questionItem.content"/>
                            </div>
                        </el-form-item>
                </el-form>
                <el-row class="do-align-center" style="text-align: center;">
                    <el-button @click="close">取消</el-button>
                    <el-button type="primary" @click="submitForm">提交</el-button>
                </el-row>
            </el-card>
        </el-row>
  </div>
</template>

<script>
  import Pagination from '@/components/Pagination'
  import { getAnswerPaper,answerSubmit } from '@/api/TeachingCenter/taskManage'
  import { parseTime, getURLParam } from '@/utils/index'
  export default {
    components: { Pagination },
    data() {
      return {
        queryParam: {
          pageNumber: 1,
          pageSize: 10,
          filters: [
            {
              value: '',
              paramName: 'create_time',
              paramOperator: 'EQ'
            },
            {
              value: '',
              paramName: 'status',
              paramOperator: 'EQ'
            }
          ]
        },
        checkList:[],
        titleItems: [
            {name: '题目1',questionItems:[]}
        ],// 题目
        form: {
            id: 0,
            // doTime: 0,
            answerItems: [
                // {
                    // content:'',
                    // contentArray: "",
                    // doRight: false,
                    // questionId: 0,                    
                // }
            ],
        },
        total: 0
      }
    },
    mounted() {
      let id = getURLParam('id', window.location.href)
      this.form.id = id
      this._getTaskDetail()
    },
    methods: {
      async _getTaskDetail() {
        const { data: {paper: {titleItems}} } = await getAnswerPaper(this.form.id)
          console.log(titleItems,'paper')
          titleItems.forEach(titleItem=>{
            titleItem.questionItems.forEach(questionItem=>{
              questionItem.contentArray = []
            })
          })
          this.titleItems = titleItems
      },
        handleAnswer() {},
        close(){
          this.$router.push({name: 'taskCenter'})
        },
        submitForm(){
          let answerItems = []
          this.titleItems.forEach(titleItem => {
            titleItem.questionItems.forEach(questionItem=>{
              let type = questionItem.questionType
              answerItems.push({
                questionId: questionItem.id,
                id: questionItem.id,
                content: (type == 5 || type == 1) ? questionItem.content:'',
                contentArray: type == 2?questionItem.contentArray:[],
                doRight: type == 3?questionItem.doRight:false,
              })
            })
          });
          this.form.answerItems = answerItems
          this.form.questionScore = 80.0
          this.form.doTime = 32
          answerSubmit(this.form).then(res=>{
            if(res.code == 1) {
              this.$message.success({
                message: "提交成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.$router.push({name: 'taskCenter'})
                }
              })
            }
          })
        },
      parseTime
    },

  }
</script>
<style lang="scss" scoped>
  .task-detail {
    max-height: 100vh;
    overflow-y: auto;
    // padding: 0 20px;
  }
  .questionItems-tit {
    padding-bottom: 20px;
    border-bottom: 1px solid #000;
  }
</style>
